iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0

我們在DAY 1建立的網站,大家應該還有印象。

我們今天來看一下這個頁面是怎麼產生的吧~

在這之前,先補充一些使用VSCODE的小訣竅。

先開啟VSCODE,並開啟我們的專案,你可以選擇以下三種方案:

  1. 從[VSCODE]->[檔案]->[開啟資料夾],然後選你的Angular專案即可。

    蛤,你說我的VSCODE為什麼是中文?在VSCODE左邊欄選第五個圖示,搜尋Chinese,就可以找到中文的語言包並安裝囉~

  2. 在[專案資料夾] -> [右鍵] -> [Open with Code]

  3. 在專案資料夾開啟Command Line,輸入:

code .

按住Shift + 滑鼠右鍵也會出現選項讓你快速開啟Command Line唷

進到VSCODE後,按快捷鍵:

Ctrl + `

開啟 Terminal ,也就是 Command Line 。「 ` 」 這個鍵通常在鍵盤的 ESC 下方。

接著你應該就可以在 VSCODE 下方輸入 command 了。

先下指令開啟測試伺服器以及瀏覽器:

ng serve -o

在瀏覽器按F12或 [右鍵] -> [檢查] ,就可以開啟開發人員模式。

首頁,也就是現在這個頁面,會顯示 index.html 的內容。從開發人員模式可以看出來,能顯示在瀏覽器的內容放在 <body></body> 標籤裡,裡面有一個 app-root 的標籤和一些匯入js的標籤,其中 app-root 就是我們的內容來源:

那我們一步步來看 app-root 是怎麼產生的吧。

我們之前在 angular.json 中看過的:

"index": "src/index.html"
"main": "src/main.ts"

分別定義了首頁程式進入點,若之前有學過 C 、 JAVA 之類的程式語言,對於 main function 應該不陌生,像這樣:

int main() {
    ...
    return 0;
}

那麼現在 main.ts 這個檔案就是取代了 main function 的角色。

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

typescript 是腳本語言,與 javascript 、 python 類似,都是逐行執行程式碼。我們看看這個檔案做了甚麼事:

  • 1 ~ 5 行: 匯入一些變數和這個 ts 檔用到的 funtion 。
  • 7 ~ 9 行: 真正執行程式是從這裡開始,還記不記得我們之前介紹過一個environments資料夾,這個 if 判斷式是當我們下了 ng build --prod 這個命令時, environment.ts 會被置換成environment.prod.ts ,使得這邊的environment.prodution 從False被換成True,才會執行enableProdMode() 這個function。
  • 11 ~ 12 行,這邊是執行 platformBrowserDynamic() 產生一個 platform 的實體,然後用 bootstrapModule() 載入 AppModule 這個模組,後面串接 .catch(err => console.error(err)) 是把錯誤訊息導向console。
    OK, AppModule ,我們繼續往下。

AppModule

Crtl +滑鼠左鍵點一下 AppModule ,就可以切換到 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

由第6行的 @NgModule 可以知道 AppModule這個class被標註成NgModule,@NgModule 是一個Decorator,之後會詳細介紹有關於Decorator以及NgModule的每個欄位。我們先專注在如何產生頁面:

  • declarations
    這個地方放的是要用到的 Component 、 Directive 跟 Pipe,目前只有 AppComponent
  • bootstrap
    這個地方放的是 root component,只有 root module 需要設定這個欄位。這邊的 AppComponent 會被插入到index.html中。

AppComponent

所以關鍵角色是 AppComponent,一個 Component 會有四個檔案:

  • app.component.css
    給該 component 使用的css,目前是空的。
  • app.component.html
    AppComponent 要如何顯示內容的樣板就定義在這裡,也就是我們看到的首頁。
    注意這段程式碼:
  <h1>
    Welcome to {{ title }}!
  </h1>

這邊用了 {{ ... }} 這個語法,是Angular 的 data binding 語法中的 Interpolation,中文譯作插值,data binding 還有其他語法,之後逐一介紹。
{{ ... }}裡 title 的值,會定義在 app.component.ts 中,由 Angular 將他們綁定。在執行期時,把title的內容送到 app.component.html,因此就會看到Welcome to Sponge-Website! ,而不是Welcome to {{ title }}!

  • app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Sponge-Website';
}

我們又見到了 Decorator , 這次是 @Component ,同樣也是宣告這個 class 為 Component ,注意到第 7 行的 title 就是被送到 html 的內容。我們看一下 Component 要定義哪些東西:

  • selector
    選擇器,概念跟 css 的選擇器類似。可以先把他想成,要在 html 中使用這個元件,要給他的名字。所以我們可以用<app-root></app-root>這個標籤,來顯示這個 Component。
    把這邊改成其他名字,網站就會噴 error 囉,selector必須跟index.html的標籤對應上,可以實驗看看。
  • templateUrl
    該 component 用的樣板,除了指定 html 檔的位置外,也可以直接填入html語法,像這樣:
templateUrl: '<h1> Hello world </h1>'
  • styleUrls
    該 Component 用到的 css ,是一個陣列,也就是可以放多個 css 檔。

  • app.component.spec.ts
    用於單元測試的檔案,稍微看一下裡面其中一段程式碼:

    這邊有一些測試腳本的範例,像這段就是檢查頁面標題是不是和Sponge-Website一致,先有初步認識即可。

最後透過 export class AppComponent { ... }將這個 Component 匯出。

index.html

所以在經過 AppComponent 、 AppModule 這樣一層一層的傳遞,我們終於可以在 index.html 顯示我們的 Component 了,12行的<app-root></app-root> 就是我們剛剛 AppComponent 所定義的 selector 。

總結一下整個流程

程式進入點main.ts ->載入 AppModule -> 載入AppComponent -> 把 AppComponent<app-root></app-root>標籤放進 index.html ->大功告成!

我們明天來講一下html,預計以index.htmlapp.component.html為範例。

reference

有關 platformBrowserDynamic 的參考資料:
https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604


上一篇
# DAY 3 檔案目錄(二)
下一篇
# DAY 5 HTML (一)
系列文
從零開始的Angular前端開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言